<template>
	<view class="content">
		<view class="header">
			<view class="statusBar" :style="{ height: statusBarHeight + 'PX'}"></view>
			<view class="titleView">
				<view class="back" @click="backClick">
					<image src="../../static/images/back.png" mode=""></image>
				</view>
				<view class="title">
					<text>观看记录</text>
				</view>
				<view class="amdin" @click="adminClick">
					<tex>{{ adminTitle }}</tex>
				</view>
			</view>
		</view>
		<text style="text-align: center; margin-top: 50px;" v-if="videoStorage.length == 0">空空如也</text>
		<view class="videoContent" v-if="videoStorage.length !== 0">
			<scroll-view :scroll-y="true" :style="{ height: videoContentHeight + 'px'}" scroll-with-animation
			 :scroll-into-view="'video-' + scrollIntoView"
				>
				<view class="item" v-for="(item, index) in videoStorage" :key="index"
					:class="{ active: item.active}"
					@click="videoItemClick(index)"
					:id="'video-' + index"
				>
					<view class="img">
						<image :src="item.vod_pic" mode=""></image>
					</view>
					<view class="itemcontent">
						<text class="h1">{{ item.vod_name }}</text>
						<text class="txt">观看至 {{ item.currentTitle }} </text>
						<text class="txt">观看进度： {{ ((item.vod_currentTime / item.vod_duration) * 100).toFixed(2) }}%</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="del" :style="{ bottom: adminTitle== '取消'? 0: '-200px'}">
			<view class="delitem" @click="cheackAllClick">
				<text >
					{{ activeAllTitle }}
				</text>
			</view>
			<view class="delitem" @click="deleteClick">
				<text v-text="toDeleteNumber? `删除(${toDeleteNumber})`:'删除'">
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { select } from '@/commons/querySelect.js'
	export default {
		data() {
			return {
				statusBarHeight: this.$systemInfo.statusBarHeight,
				adminTitle: '管理',
				videoStorage: [],
				videoContentHeight: 0,
				scrollIntoView: 0,
				activeAllTitle: '全选'
			};
		},
		computed: {
			toDeleteNumber() {
				let num = 0
				this.videoStorage.forEach( item => {
					if (item.active) {
						num++
					}
				})
				
				return num
			}
		},
		onLoad() {
			this.getVideoStroage()
		},
		async mounted() {
			const header = await select('.header')
			this.videoContentHeight = this.$systemInfo.windowHeight - header.height - uni.upx2px(25)
		},
		methods: {
			backClick() {
				uni.navigateBack()
			},
			getVideoStroage() {
				const videoStorage = uni.getStorageSync('videoCache') || []
				this.videoStorage = videoStorage.map( item => {
					return {
						...item,
						active: false
					}
				})
			},
			async videoItemClick(index) {
				if (this.adminTitle == '管理') {
					const { data: res } = await this.$http({
						url: this.$api.search,
						method: 'GET',
						data: {
							vod_id: Number(this.videoStorage[index].vod_id)
						}
					})
					if ( res.status !== 200) {
						// 不存在
						uni.showToast({
						    title: '该影片已不存在请联系客服',
						    duration: 3000,
							icon: 'none'
						});
						return 
					}
					// 存在
					
					this.$goto('/pages/player/player', res.data.result[0])
					
				} else {
					this.scrollIntoView = index
					this.videoStorage[index].active = !this.videoStorage[index].active
				}
				
			},
			async adminClick() {
				const del = await select('.del')
				if (this.adminTitle == '管理') {
					this.adminTitle = '取消'
					this.videoContentHeight = this.videoContentHeight - (del.height )
				} else {
					this.adminTitle = '管理'
					this.cheackAll(false)
					this.videoContentHeight = this.videoContentHeight + (del.height )
					
				}
			},
			// 全选
			cheackAllClick() {
				if (this.activeAllTitle == '全选') {
					this.activeAllTitle = '取消'
					this.cheackAll(true)
				} else {
					this.activeAllTitle = '全选'
					this.cheackAll(false)
				}
			},
			// 全选/全不选
			cheackAll(tf) {
				for (let i = 0; i < this.videoStorage.length; i++) {
					this.videoStorage[i].active = tf
				}
			},
			// 删除
			deleteClick() {
				this.videoStorage = this.videoStorage.filter( item => item.active !== true)
				uni.setStorage({
					key: 'videoCache',
					data: this.videoStorage,
					fail() {
						console.log('删除失败')
					},
					success() {
						console.log('删除成功')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		overflow: hidden;
	}
	.statusBar {
		
	}
	.header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 150rpx;
		background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
		color: #fff;
		box-sizing: border-box;
		.titleView {
			display: flex;
			align-items: center;
			width: 100%;
			height: 128rpx;
			
			.back {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 64rpx;
				height: 64rpx;
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			
			.title {
				flex: 1;
				text-align: center;
				text{
					font-size: 20px;
					font-weight: bold;
				}
			}
			
			.amdin {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 72rpx;
				height: 72rpx;
				text-align: center;
				margin-right: 20rpx;
			}
		}
	}
	
	.videoContent {
		flex: 1;
		padding: 10rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		
		.item {
			display: flex;
			width: 100%;
			height: 250rpx;
			background-color: #ffffff;
			border-radius: 5px;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			transition: all 1s ease 0s;
			.img {
				width: 200rpx;
				height: 100%;
				
				image {
					width: 100%;
					height: 100%;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
					
				}
			}
			
			.itemcontent {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20rpx;
				
				.h1 {
					font-size: 20px;
					font-weight: bold;
				}
				
				.txt {
					color: #706b6f;
				}
			}
		}
		
		@keyframes active {
			0% {
				background-color: #FEB692;
			}
			100% {
				background-image: linear-gradient( 135deg, #FEB692 10%, #EA5455 100%);
			}
		}
		
		.active {
			animation: active 1s ease-in forwards;
		}
		
	}
	
	.del {
		position: fixed;
		left: 0;
		bottom: -200px;
		display: flex;
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #d9d9d9;
		background-color: #fff;
		transition: all .6s ease 0s;
		
		.delitem {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
	}
</style>
